import React, { useContext, useEffect, useState } from 'react'

import Card from '@mui/material/Card'
import CardActions from '@mui/material/CardActions'
import Typography from '@mui/material/Typography'

import Button from '@mui/material/Button'
import Accordion from '@mui/material/Accordion'
import AccordionSummary from '@mui/material/AccordionSummary'
import AccordionDetails from '@mui/material/AccordionDetails'

import BaseNode from '@/Model/Node/BaseNode'
import ExpandMoreSharp from '@mui/icons-material/ExpandMoreSharp'
import useEditor from '../hooks/useEditor'
import Chip from '@mui/material/Chip'
import TextField from '@mui/material/TextField'

interface Props{
  data: BaseNode,
  children?:JSX.Element[] | JSX.Element | any
  actions?:JSX.Element,
  type?:string
}

export default function NodeCard (props: Props) {
  const {
    setCurrentCard,
    currentCard,
    addCommonNode,
    addDecisionNode,
    delNode,
    handleOnChangeNext,
    handleOnChangePrev,
    toNext,
    toPrev
  } = useEditor(props.data.uuid)


  return <Card variant="outlined"
    onClick={() => setCurrentCard(props.data.uuid)}
    style={{
      width: '400px',
      margin: '10px',
      borderColor: currentCard === props.data.uuid ? 'red' : '#ddd',
    }}>
    
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreSharp />} style={{background:'#ccc'}}>
        <Typography>主体</Typography>
        <Chip label={props.type} size="small" style={{marginLeft:20, background:'#FF6600', color:'#fff'}}/>
      </AccordionSummary>
      <AccordionDetails>
        {props.children ?? null}
      </AccordionDetails>
    </Accordion>
    
    <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreSharp />} style={{background:'#ddd'}}>
        <Typography>详细</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography style={{fontSize: 10, marginTop: 10}}>uuid:{props.data.uuid}</Typography> <br />

        <TextField 
          onInput={handleOnChangePrev}
          variant="standard" size="small" multiline fullWidth value={props.data.prev} label="prev:" />
          <TextField 
          onInput={handleOnChangeNext}
          variant="standard" size="small" multiline fullWidth value={props.data.next} label="next:" />
      </AccordionDetails>
    </Accordion>
    {
      props.actions ?? (
        <CardActions>
          <Button onClick={addCommonNode} size="small">普通节点</Button>
          <Button onClick={addDecisionNode} size="small">判断节点</Button>
          <Button onClick={delNode} size="small">删除</Button>
          
          {props.data.prev?<Button onClick={toPrev}>上一步</Button>:null}
          {props.data.next?<Button onClick={toNext}>下一步</Button>:null}
        </CardActions>
      )
    }
    
  </Card>
}
